<template>
    <view >
        <view class="title">{{$t('sort.sign-sign.sign')}}：</view> <view class="time">{{time}}</view>
       <canvas  canvas-id="mycanvas" class="mycanvas" @touchstart="canvasStart($event)" @touchmove="canvasMove($event)"></canvas>
        <view class="footer">
            <view class="right" @click="clear">{{$t('sort.sign-sign.eliminate')}}</view>
            <view class="left" @click="finish">{{$t('sort.sign-sign.submit')}}</view>
        </view>
    </view>
</template>
<script>
    var x = 20;
    var y =20;
    export default{
		props:["list"],
        data(){
            return {
				startX:'',     
				startY:'',
				ctx:''
            }
        },
        methods:{
		
				canvasStart(event) {
					this.startX = event.touches[0].x
					this.startY = event.touches[0].y
				},
				canvasMove(event) {
					event.preventDefault()
					this.ctx = uni.createCanvasContext('mycanvas')	
					//设置画笔样式
					this.ctx.lineWidth = 4;
					this.ctx.lineCap = "round"
					this.ctx.lineJoin = "round"
					this.ctx.beginPath()
					this.ctx.moveTo(this.startX, this.startY)
					this.ctx.lineTo(event.touches[0].x, event.touches[0].y)
					this.ctx.stroke()
					this.ctx.draw(true)
					this.startX = event.touches[0].x
					this.startY = event.touches[0].y
				},

            //清空画布
            clear:function(){
                let that = this;
                uni.getSystemInfo({
                    success: function(res) {
                        let canvasw = res.windowWidth;
                        let canvash = res.windowHeight;
                        that.ctx.clearRect(0, 0, canvasw, canvash);
                        that.ctx.draw(true);
                    },
                })
            },
            //完成绘画并保存到本地
            finish:function(){
				
                uni.canvasToTempFilePath({
                  canvasId: 'mycanvas',
                  success: res => {
					 
                    let path = res.tempFilePath;
					// console.log(path);
					 // uni.saveImageToPhotosAlbum({
					 //            filePath: path,
					 //            success: function () {
					 //                console.log('save success');
					 //            }
					 //        });
				
					// 跳转付款页面
					uni.navigateTo({
						url:'../../pages/sign-payment/sign-payment?list='+this.list
					})
                  } 
                })
            }
        },
		created() {
			var date =new Date();
			var year=date.getFullYear();
			var mouth=date.getMonth()+1;
			var day=date.getDay();
			var hour=date.getHours();
			var min=date.getMinutes();
			
			if(mouth<10){
				mouth='0'+mouth;
			} if(day<10){
				day ='0'+day;
			} if(hour<10){
				hour='0'+hour;
			} if(min<10){
				min = '0'+min
			}
			var time = year+'-'+mouth+'-'+day+' '+hour+':'+min
			this.time=time;
			// console.log(time);	
			console.log(JSON.stringify(this.list));
		}
    }
</script>
<style>
	.time{
		float: right;
		font-size: .8em;
		margin-right: 10px;
		padding-top: 20px;
		color: #6A6A6A;
		position: absolute;
		right: 0;
		top: -10px;
	}
    .title{
      font-size: .8em;
      margin-right: 10px;
      color: #6A6A6A;
	  padding-top: 20px;
    }
    .mycanvas{
        width: 100%;
        height: calc(86vh - 250upx);
        background-color: #FFFFFF;
		margin-top: 30px;
    }
    .footer{
        font-size: 16px;
        height: 150upx;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .left,.right{
        line-height: 100upx;
        height: 100upx;
        width: 250upx;
        text-align: center;
        font-weight: bold;
        color: white;
        border-radius: 5upx;
    }
    .left{
        background: #007AFF;
    }
    .right{
        background:#b9b9b9;
    }
</style>